layui.define(['jquery', 'layer', 'func'], function (exports) {
    const {jquery: $,  func} = layui;
    var layer = parent.layer;
    exports("album", {
        render: function (config) {
            config = $.extend(true, {
                name: "pic",
                title: "图片",
                desc: "待指定尺寸",
                value: "",
                //表单形式
                form: 1,
                //事件通知仅限一次
                event_until: 1,
            }, config);


            if (config.value === "undefined") {
                config.value = '';
            }
            const id = config.name;

            var html = `
               <img data-id="${id}" 
                    class="album_preview" 
                    style="height: 50px;width:50px;border-radius: 5px"           
                    src="${config.value}" onerror="this.src='/biz/img/default.png'">
               <button data-id="${id}" 
                    style="margin-left: 10px;" 
                    id="${config.name}_button" 
                    type="button"
                    class="layui-btn layui-btn-normal">选择图片</button>     
            `;

            if (parseInt(config.form)) {
                html = `
                 <div class="layui-form-item">
                    <label class="layui-form-label">${config.title}</label>
                    <div class="layui-input-inline">
                        <input data-id="${id}" class="album_input" name="${config.name}" type="hidden" value="${config.value}">
                        ${html}
                        <div class="layui-form-mid layui-word-aux">${config.desc}</div>
                    </div>
                </div>
                `;
            }
            $(config.elem).html(html);

            // $(config.elem).html(`
            //     <div class="layui-form-item">
            //         <label class="layui-form-label">${config.title}</label>
            //         <div class="layui-input-inline">
            //             <input data-id="${id}" class="album_input" name="${config.name}" type="hidden" value="${config.value}">
            //             <img data-id="${id}" class="album_preview" style="height: 50px;width:50px;border-radius: 10px"
            //                  src="${config.value}" onerror="this.src='/biz/img/default.png'">
            //             <button data-id="${id}" style="margin-left: 10px;" id="${config.name}_button" type="button" class="layui-btn layui-btn-normal">选择图片</button>
            //             <div class="layui-form-mid layui-word-aux">${config.desc}</div>
            //         </div>
            //     </div>
            // `);
            $('#' + config.name + "_button").on("click", function () {
                const id = $(this).data('id');
                layer.open({
                    title: "相册",
                    type: 2,
                    content: func.url("/source/Album/index", {
                        selector: 1,
                        from: id,
                    }),
                    area: ['90%', '90%'],
                    success: function () {
                        func.receiveMessage(id, function (data) {
                            $(config.elem).attr('data-value', data.url);
                            $(config.elem).data("value", data.url);
                            //清楚一次缓存
                            $(".album_preview[data-id='" + id + "']").attr("src", data.url);
                            $(".album_input[data-id='" + id + "']").val(data.url);
                        }, parseInt(config.event_until) ? true : false);
                    }
                })
            });
        },
    });
});